<template>
  <div class="big-Box">
    <!-- 产品轮播 -->
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="#1989fa">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.img_url" alt="" width="100%"
      /></van-swipe-item>
    </van-swipe>
    <!-- 服务保障 -->
    <ServeModel />
    <!-- 产品标题与价格 -->
    <div class="titles">
      <h1>{{ info.name }}</h1>
      <h2>{{ info.goods_brief }}</h2>
      <p>{{ info.retail_price | RMBFormat }}</p>
    </div>
    <!-- 展示弹出层 -->
    <div>
      <van-cell is-link @click="showPopup = true">展示弹出层</van-cell>
      <!-- <transition name="van-fade">
        <div class="popup" v-if="showPopup">
          <div class="popup_top"></div>
          <div class="popup_bottom">
            <div>
              <img :src="info.list_pic_url" alt="" />
              <ul>
                <li>价格：{{ info.retail_price }}</li>
                <li>库存：{{ info.goods_number }}</li>
              </ul>
              <van-icon name="cross" @click="showPopup = false" />
            </div>
            <h1>数量：</h1>
            <van-stepper v-model="value" />
          </div>
        </div>
      </transition> -->
      <van-sku
        v-model="showPopup"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        ref="sku"
      />
    </div>

    <!-- 商品参数 -->
    <div class="proParmas">
      <h1>商品参数</h1>
      <ul>
        <li
          v-for="(item, index) in attribute"
          :key="index"
          class="van-ellipsis"
        >
          <span class="parmaName">{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </li>
      </ul>
    </div>

    <!-- 产品详情图片 -->
    <div class="goods_desc" v-html="info.goods_desc"></div>

    <!-- 常见问题 -->
    <div class="msg-box">
      <div class="question">
        <span></span>
        <h1>常见问题</h1>
      </div>
      <ul class="ul-msg">
        <li v-for="item in issue" :key="item.id">
          <h3><span></span>{{ item.question }}</h3>
          <p>
            {{ item.answer }}
          </p>
        </li>
      </ul>
      <div>
        <div class="question">
          <span></span>
          <h1>相关产品</h1>
        </div>
        <Products :goodslist="products" />
      </div>
    </div>

    <!-- 加入购物车导航 -->
    <van-goods-action>
      <van-goods-action-icon
        :icon="isCollected ? 'star' : 'star-o'"
        :text="isCollected ? '已收藏' : '未收藏'"
        :color="isCollected ? '#ff5000' : '#666'"
        @click="hdClickCollet"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="isLogin ? goodsCount : 0"
        @click="$router.push('/cart')"
      />
      <van-goods-action-button type="danger" text="立即购买" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addPro"
      />
    </van-goods-action>
  </div>
</template>

<script>
import {
  GetDetailData,
  GetRelatedData,
  GetCartNumData,
  ToAddcart,
} from "@/request/api";
import Products from "@/components/Products";
import ServeModel from "@/components/ServeModel";
export default {
  data() {
    return {
      value: 1,
      showPopup: false,
      banner: [],
      attribute: [],
      info: [],
      goods_desc: "",
      issue: [],
      products: [],
      isCollected: false,
      isLogin: false,

      // sku数据定义
      show: true,
      sku: {
        tree: [],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "",
      },
      messageConfig: {},
      goodsCount: null,
      productList: [],
    };
  },
  components: {
    Products,
    ServeModel,
  },
  methods: {
    hdClickCollet() {
      // 判断没有登录要跳到登录页面，提示登录
      // let token = localStorage.getItem("token");
      // if (!token) {
      //   this.$toast("请先登录!");
      //   setTimeout(() => {
      //     this.$router.push("/user");
      //   }, 1000);

      //   return;
      // }
      let ret = this.utils.mustBeLogin();
      if (!ret) return;

      this.isCollected = !this.isCollected;
    },
    addPro() {
      // 判断没有登录要跳到登录页面，提示登录
      let ret = this.utils.mustBeLogin();
      if (!ret) return;

      if (this.showPopup) {
        let stepNum = this.$refs.sku.getSkuData().selectedNum;
        ToAddcart({
          goodsId: this.$route.query.id,
          productId: this.productList[0].id,
          number: stepNum,
        }).then((res) => {
          console.log("点击加入购物车", res);

          // 更新购物车数量
          this.goodsCount = res.data.cartTotal.goodsCount;

          // 提示添加成功
          this.$toast.success("添加成功");
        });
      }
      this.showPopup = !this.showPopup;
    },
  },
  created() {
    // 进入到页面时判断是否登录，登录则显示购物车上的徽标
    let token = localStorage.getItem("token");
    if (token) {
      this.isLogin = true;
    }
    // 详情页数据请求
    GetDetailData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res.data);
      let { gallery, info, issue, attribute, productList } = res.data;
      this.banner = gallery;
      this.attribute = attribute;
      this.info = info;
      this.issue = issue;
      this.productList = productList;
      // sku数据
      this.sku.price = info.retail_price;
      this.sku.stock_num = info.goods_number;
      this.goods.picture = info.list_pic_url;
    });
    //详情页相关产品的数据请求
    GetRelatedData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res.data);
      this.products = res.data.goodsList;
    });
    // 购物车数量的请求
    GetCartNumData().then((res) => {
      console.log("购物车数量", res.data);
      this.goodsCount = res.data.cartTotal.goodsCount;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.van-goods-action {
  z-index: 9999;
}
/deep/.van-sku-container {
  min-height: 0;
}
/deep/.van-sku__stepper-title,
/deep/.van-sku__stepper {
  float: none;
}
.titles {
  /* margin-top: 0.1rem; */
  /* margin-bottom: 0.015rem; */
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
  h1 {
    font-size: 18px;
    padding-top: 0.18rem;
  }
  h2 {
    font-size: 16px;
    margin: 0.18rem 0;
  }
  p {
    font-size: 14px;
    color: #b80000;
    padding-bottom: 0.3rem;
  }
}
.proParmas {
  margin-top: 0.2rem;
  background-color: #fff;
  padding: 0 0.1rem 0.1rem 0.1rem;
  h1 {
    font-size: 18px;
    padding: 0.18rem 0;
  }
  ul li {
    background-color: #efefef;
    height: 0.3rem;
    line-height: 0.3rem;
    /* padding-left: 0rem; */
    border-radius: 6px;
    margin-bottom: 0.06rem;
    .parmaName {
      display: inline-block;
      width: 0.8rem;
      /* background-color: #fff; */
      text-align: right;
      margin-right: 0.1rem;
      color: #bbb;
    }
  }
}
/deep/.goods_desc {
  img {
    max-width: 100%;
    display: block;
  }
}
.msg-box {
  background-color: #fff;
  .question {
    text-align: center;
    padding: 0.15rem 0;
    position: relative;
    span {
      display: inline-block;
      width: 45%;
      height: 0.02rem;
      background-color: #ccc;
    }
    h1 {
      width: 1rem;
      height: 0.18rem;
      background-color: #fff;
      font-size: 18px;
      position: absolute;
      top: 0.15rem;
      left: 50%;
      margin-left: -0.51rem;
    }
  }
  .ul-msg {
    li {
      font-size: 14px;
      h3 {
        font-size: 16px;
        span {
          display: inline-block;
          width: 0.05rem;
          height: 0.05rem;
          background-color: #b80000;
          border-radius: 50%;
          vertical-align: middle;
          margin: 0.1rem;
        }
      }
      p {
        margin: 0.1rem 0.25rem;
        color: #6b6b6b;
        line-height: 0.14rem;
      }
    }
  }
}
/* .van-goods-action {
  z-index: 999;
} */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  .popup_top {
    width: 100%;
    height: 60%;
    background: rgba(0, 0, 0, 0.6);
  }
  .popup_bottom {
    background-color: #fff;
    width: 100%;
    height: 40%;
    padding-left: 0.1rem;
    div {
      display: flex;
      padding-top: 0.2rem;
      img {
        width: 1rem;
        height: 1rem;
        flex: 1;
      }
      ul {
        flex: 1;
        li {
          font-size: 14px;
          margin: 0.2rem 0;
          /* padding-right: 1rem; */
        }
      }
      .van-icon {
        flex: 1;
        text-align: right;
        transform: translateX(-0.2rem);
        font-size: 20px;
      }
    }
    h1 {
      font-size: 18px;
      padding-top: 0.1rem;
    }
  }
}
</style>